{% extends 'base/base.html' %}
{% load static %}

{% block css %}
    <link href="/static/index/css/default.css" rel="stylesheet">
    <link href="/static/wenjuanresult/select_t.css" rel="stylesheet">
    <link href="/static/css/bootstrap-multiselect.css" rel="stylesheet">
{% endblock %}

<!-- 主页默认 content -->
{% block content %}
    <div class="section-block-grey">
        <div class="center-holder section-heading" style="margin-top:4rem;margin-bottom: 6rem;">
            <p style="font-size:30px"><b>调查员问卷录入数量查询</b></p>
        </div>
        <div class="col-sm-10" style="float: left; margin-right: 50px;font-weight: bolder;font-size: 20px;">
            调查员姓名：{{ userinfo.name }} 调查员电话：{{ userinfo.phone }}
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12" style="margin-bottom: 10rem;">
            <br><br><br>
            <div style="display: flex;flex-direction: row;justify-content: space-between;align-items:center;">
                <span id="id1" style="font-weight: bolder;font-size: 18px;text-align: left">
                    已提交入户筛查表（湖南省):套。已提交健康人群问卷（湖南省）套.
                    已提交脑出血患者调查问卷（湖南省）:套。 已提交脑梗塞患者调查问卷（湖南省）:套。
                    已提交街道乡镇级调查单位基本信息采集表（湖南省）:套。
                </span>
                <span id="id2" style="font-weight: bolder;font-size: 18px;text-align: left">
                    未提交入户筛查表（湖南省):套。未提交健康人群问卷（湖南省）:套。
                    未提交脑出血患者调查问卷（湖南省）:套。未提交脑梗塞患者调查问卷（湖南省）:套。
                    未提交街道乡镇级调查单位基本信息采集表（湖南省）:套。
                </span>
            </div>
        </div>
        <div class="clearfix visible-xs-block"></div>
        <div id="table2" style="width: 100%;height: 300px;margin-top:35rem"></div>
        <br class="row"><br/>
    </div>
{% endblock %}s


{% block js %}
    <script src="/static/js/echarts.js"></script>
    <script>

        var id1 = document.getElementById("id1");
        var id2 = document.getElementById("id2");
        id1.innerHTML = "已填写入户筛查表" + {{wenjuancount_tianxie}}[0] + "套。<br>" +
                        "已填写健康人群问卷:" + {{wenjuancount_tianxie}}[1] + "套。<br>" +
                        "已填写脑出血患者调查问卷:" + {{wenjuancount_tianxie}}[2] + "套。<br>" +
                        "已填写脑梗塞患者调查问卷:" + {{wenjuancount_tianxie}}[3] + "套。<br>" +
                        "已填写街道乡镇级调查单位基本信息采集表:" + {{wenjuancount_tianxie}}[4] + "套。";
        id2.innerHTML = "已提交入户筛查表:" + {{ wenjuancount_tijiao}}[0] + "套。<br>" +
                        "已提交健康人群问卷:" + {{ wenjuancount_tijiao}}[1] + "套。<br>" +
                        "已提交脑出血患者调查问卷:" + {{ wenjuancount_tijiao}}[2] + "套。<br>" +
                        "已提交脑梗塞患者调查问卷:" + {{wenjuancount_tijiao}}[3] + "套。<br>" +
                        "已提交街道乡镇级调查单位基本信息采集表:" + {{ wenjuancount_tijiao}}[4] + "套。<br>";
        var seriesdata1 = [
            {name: "已填写入户筛查表", value: {{wenjuancount_tianxie}}[0]==0?null:{{wenjuancount_tianxie}}[0]},
            {name: "已填写健康人群问卷", value: {{wenjuancount_tianxie}}[1]==0?null:{{wenjuancount_tianxie}}[1]},
            {name: "已填写脑出血患者调查问卷", value: {{wenjuancount_tianxie}}[2]==0?null:{{wenjuancount_tianxie}}[2]},
            {name: "已填写脑梗塞患者调查问卷", value: {{wenjuancount_tianxie}}[3]==0?null:{{wenjuancount_tianxie}}[3]},
            {name: "已填写街道乡镇级调查单位基本信息采集表", value: {{wenjuancount_tianxie}}[4]==0?null:{{wenjuancount_tianxie}}[4]},
        ]
        var seriesdata2 = [
            {name: "已填写入户筛查表", value: {{wenjuancount_tianxie}}[0]==0?null:{{wenjuancount_tianxie}}[0]},
            {name: "已提交入户筛查表", value: {{wenjuancount_tijiao}}[0]==0?null:{{wenjuancount_tijiao}}[0]},
            {name: "已填写健康人群问卷", value: {{wenjuancount_tianxie}}[1]==0?null:{{wenjuancount_tianxie}}[1]},
            {name: "已提交健康人群问卷", value: {{wenjuancount_tijiao}}[1]==0?null:{{wenjuancount_tijiao}}[1]},
            {name: "已填写脑出血患者调查问卷", value: {{wenjuancount_tianxie}}[2]==0?null:{{wenjuancount_tianxie}}[2]},
            {name: "已提交脑出血患者调查问卷", value: {{wenjuancount_tijiao}}[2]==0?null:{{wenjuancount_tijiao}}[2]},
            {name: "已填写脑梗塞患者调查问卷", value: {{wenjuancount_tianxie}}[3]==0?null:{{wenjuancount_tianxie}}[3]},
            {name: "已提交脑梗塞患者调查问卷", value: {{wenjuancount_tijiao}}[3]==0?null:{{wenjuancount_tijiao}}[3]},
            {name: "已填写街道乡镇级调查单位基本信息采集表", value: {{wenjuancount_tianxie}}[4]==0?null:{{wenjuancount_tianxie}}[4]},
            {name: "已提交街道乡镇级调查单位基本信息采集表", value: {{wenjuancount_tijiao}}[4]==0?null:{{wenjuancount_tijiao}}[4]},
        ]
        var myChart2 = echarts.init(document.getElementById("table2"));
        var option2 = {
            title: {
                text: "调查员问卷录入数量查询",
                left: "center"
            },
            label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                distance: 20, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                verticalAlign: 'middle',
                textStyle: { // 数值样式
                  color: 'black',
                  fontSize: 12
                }
              },
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ["已填写", "已提交", "已填写", "已提交", "已填写", "已提交", "已填写", "已提交", "已填写", "已提交"],
                    axisTick: {
                        alignWithLabel: true,
                    }
                },
                {
                    type: 'category',
                    data: [
                        {
                            value: '入户筛查表',
                            textStyle: {
                                lineHeight: 70
                            }
                        }, {
                            value: '健康人群问卷',
                            textStyle: {
                                lineHeight: 70
                            }
                        },
                        {
                            value: '脑出血患者调查问卷',
                            textStyle: {
                                lineHeight: 70
                            }
                        },
                        {
                            value: '脑梗塞患者调查问卷',
                            textStyle: {
                                lineHeight: 70
                            }
                        },
                        {
                            value: '街道乡镇级基本信息采集表',
                            textStyle: {
                                lineHeight: 70
                            }
                        },
                    ],
                    position: 'bottom',
                    axisTick: {
                        length: 20
                    },
                },

            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '问卷数量',
                    type: 'bar',
                    data: seriesdata2,
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = [
                                    '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'
                                ];
                                return colorList[params.dataIndex];
                                // 取每条数据的 index 对应 colors 中的 index 返回这个颜色
                            }
                        }
                    },
                }
            ]
        };
        myChart2.setOption(option2);

    </script>
{% endblock %}
